/**
 * 商品详情页面组件
 * 
 * 功能说明：
 * - 展示商品的详细信息，包括图片、名称、价格、描述等
 * - 提供收藏/取消收藏商品功能
 * - 提供购买商品功能（创建交易）
 * - 提供联系卖家功能（发起私信）
 * - 处理商品已售或下架状态的显示
 * 
 * 交互说明：
 * - 未登录用户点击购买或收藏时会提示登录
 * - 用户不能购买或收藏自己发布的商品
 * - 点击购买后会弹出确认对话框，用户需选择支付方式和填写备注
 */

import React, { useEffect, useState } from 'react'
import { Card, Row, Col, Tag, Button, message, Spin, Avatar, Empty, Modal, Form, Select, Input, Space } from 'antd'
import { HeartOutlined, HeartFilled, UserOutlined, ShoppingCartOutlined } from '@ant-design/icons'
import { useParams, useNavigate } from 'react-router-dom'
import apiClient from '../services/api'
import { createTrade } from '../services/api'
import { useAuthStore } from '@stores/auth'

const { Option } = Select
const { TextArea } = Input

/**
 * 商品详情页面组件
 * 
 * @returns {JSX.Element} 商品详情页面元素
 */
function ProductDetailPage() {
  // 从路由参数中获取商品ID
  const { id } = useParams()
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate()
  // 获取认证状态和用户信息
  const { isAuthenticated, user } = useAuthStore()
  
  // 页面状态管理
  const [loading, setLoading] = useState(true)         // 加载状态
  const [product, setProduct] = useState(null)         // 商品详情数据
  const [isFavorited, setIsFavorited] = useState(false) // 商品收藏状态
  const [buyModalVisible, setBuyModalVisible] = useState(false) // 购买对话框显示状态
  const [buyLoading, setBuyLoading] = useState(false)   // 购买操作加载状态
  const [buyForm] = Form.useForm()                      // 购买表单实例

  // 组件挂载或商品ID变化时获取商品详情
  useEffect(() => {
    fetchProduct()
  }, [id])

  /**
   * 获取商品详情
   */
  const fetchProduct = async () => {
    setLoading(true)
    try {
      // 调用API获取商品详情
      const res = await apiClient.get(`/api/products/${id}`)
      if (res.data.success) {
        // 更新商品数据和收藏状态
        setProduct(res.data.data.product)
        setIsFavorited(res.data.data.product.is_favorited)
      } else {
        setProduct(null)
      }
    } catch (e) {
      // 错误处理
      console.error('获取商品详情失败:', e)
      setProduct(null)
    } finally {
      setLoading(false)
    }
  }

  /**
   * 处理收藏/取消收藏商品
   */
  const handleFavorite = async () => {
    // 检查用户是否登录
    if (!isAuthenticated) {
      message.info('请先登录')
      return
    }
    
    try {
      if (isFavorited) {
        // 取消收藏
        await apiClient.delete(`/api/favorites/${id}`)
        setIsFavorited(false)
        message.success('取消收藏成功')
      } else {
        // 添加收藏
        await apiClient.post(`/api/favorites/${id}`)
        setIsFavorited(true)
        message.success('收藏成功')
      }
    } catch (e) {
      message.error('操作失败')
    }
  }

  /**
   * 处理购买商品
   */
  const handleBuy = () => {
    // 检查用户是否登录
    if (!isAuthenticated) {
      message.info('请先登录')
      return
    }
    
    // 检查是否是自己的商品
    if (product && product.user_id === user?.id) {
      message.warning('不能购买自己发布的商品')
      return
    }
    
    // 显示购买确认对话框
    setBuyModalVisible(true)
  }

  /**
   * 处理购买表单提交
   * 
   * @param {Object} values - 表单提交值
   * @param {string} values.payment_method - 支付方式
   * @param {string} values.remark - 备注信息
   */
  const handleBuySubmit = async (values) => {
    try {
      setBuyLoading(true)
      // 调用API创建交易
      const response = await createTrade({
        product_id: parseInt(id),
        payment_method: values.payment_method,
        remark: values.remark
      })
      
      if (response.data.success) {
        message.success('交易创建成功！')
        setBuyModalVisible(false)
        buyForm.resetFields()
        // 跳转到交易列表页面
        navigate(`/trades`)
      }
    } catch (error) {
      console.error('创建交易失败:', error)
      message.error(error.response?.data?.message || '创建交易失败')
    } finally {
      setBuyLoading(false)
    }
  }

  /**
   * 联系卖家
   */
  const handleContactSeller = async () => {
    // 检查用户是否登录
    if (!isAuthenticated) {
      message.info('请先登录')
      navigate('/login')
      return
    }
    
    // 检查是否是自己的商品
    if (product && product.user_id === user?.id) {
      message.warning('不能和自己私信')
      return
    }
    
    try {
      // 发起会话（自动创建或获取）
      const res = await apiClient.get(`/api/messages/${product.user_id}`)
      if (res.data.success) {
        message.success('已进入与卖家的私信')
        navigate('/chat')
      }
    } catch (e) {
      message.error('发起私信失败')
    }
  }

  // 加载状态显示
  if (loading) {
    return <Spin style={{ marginTop: 100 }} />
  }
  
  // 商品不存在显示
  if (!product) {
    return <Empty description="商品不存在或已下架" style={{ marginTop: 100 }} />
  }

  // 检查商品是否已售出或已下架
  const isSoldOrInactive = product.status !== 'active'

  return (
    <div style={{ marginTop: 64, marginLeft: isAuthenticated ? 200 : 0, minHeight: 'calc(100vh - 64px)' }}>
      <Card style={{ maxWidth: 900, margin: '0 auto' }}>
        <Row gutter={32}>
          {/* 商品图片和操作按钮 */}
          <Col xs={24} md={10}>
            <img
              src={product.ProductImages?.[0]?.image_url || 'https://via.placeholder.com/400x300?text=No+Image'}
              alt={product.name}
              style={{ width: '100%', borderRadius: 8, objectFit: 'cover', marginBottom: 16 }}
            />
            <Space direction="vertical" style={{ width: '100%' }}>
              {/* 购买按钮（登录用户且非自己的商品可见） */}
              {isAuthenticated && product.user_id !== user?.id && (
                <Button
                  type="primary"
                  size="large"
                  icon={<ShoppingCartOutlined />}
                  onClick={handleBuy}
                  block
                  disabled={isSoldOrInactive}
                >
                  {isSoldOrInactive ? '已售出/下架' : '立即购买'}
                </Button>
              )}
              {/* 已售出/下架提示 */}
              {isSoldOrInactive && (
                <div style={{ color: 'red', marginTop: 8 }}>该商品已售出或下架，无法购买</div>
              )}
              {/* 收藏按钮（登录用户可见） */}
              {isAuthenticated && (
                <Button
                  type={isFavorited ? 'primary' : 'default'}
                  icon={isFavorited ? <HeartFilled /> : <HeartOutlined />}
                  onClick={handleFavorite}
                  block
                >
                  {isFavorited ? '已收藏' : '收藏'}
                </Button>
              )}
            </Space>
          </Col>
          
          {/* 商品详情信息 */}
          <Col xs={24} md={14}>
            <h2>{product.name}</h2>
            <div style={{ color: '#ff4d4f', fontSize: 24, fontWeight: 'bold', marginBottom: 8 }}>￥{product.price}</div>
            <div style={{ marginBottom: 8 }}>
              {/* 商品标签：分类、成色、浏览量 */}
              <Tag color="blue">{product.Category?.name || '未分类'}</Tag>
              <Tag color="green">{product.condition_rating}</Tag>
              <Tag>浏览量：{product.view_count}</Tag>
            </div>
            <div style={{ marginBottom: 16 }}>{product.description}</div>
            {/* 交易地点信息 */}
            {product.location && (
              <div style={{ marginBottom: 16 }}>
                <strong>交易地点：</strong>
                <span style={{ color: '#666' }}>{product.location}</span>
              </div>
            )}
            {/* 卖家信息 */}
            <div style={{ marginBottom: 8 }}>
              <Avatar src={product.User?.avatar_url} icon={<UserOutlined />} />
              <span style={{ marginLeft: 8 }}>
                卖家：{product.User?.nickname || product.User?.username || product.User?.id || '未知'}
                {product.User?.created_at && (
                  <span style={{ color: '#888', fontSize: 12, marginLeft: 8 }}>
                    （注册于{product.User.created_at.slice(0, 10)}）
                  </span>
                )}
              </span>
              {/* 联系卖家按钮（登录用户且非自己的商品可见） */}
              {isAuthenticated && product.user_id !== user?.id && (
                <Button type="primary" size="small" style={{ marginLeft: 16 }} onClick={handleContactSeller}>
                  联系卖家
                </Button>
              )}
            </div>
            {/* 发布时间 */}
            <div style={{ color: '#888', fontSize: 12, marginTop: 8 }}>
              发布时间：
              {product.created_at
                ? product.created_at.slice(0, 19).replace('T', ' ')
                : product.createdAt
                  ? product.createdAt.slice(0, 19).replace('T', ' ')
                  : '未知'}
            </div>
          </Col>
        </Row>
      </Card>

      {/* 购买确认弹窗 */}
      <Modal
        title="确认购买"
        open={buyModalVisible}
        onCancel={() => setBuyModalVisible(false)}
        footer={null}
        width={500}
      >
        <Form
          form={buyForm}
          layout="vertical"
          onFinish={handleBuySubmit}
          initialValues={{
            payment_method: 'cash'
          }}
        >
          <div style={{ marginBottom: 16 }}>
            <strong>商品：</strong>{product.name}
          </div>
          <div style={{ marginBottom: 16 }}>
            <strong>价格：</strong>￥{product.price}
          </div>
          
          {/* 支付方式选择 */}
          <Form.Item
            label="支付方式"
            name="payment_method"
            rules={[{ required: true, message: '请选择支付方式' }]}
          >
            <Select placeholder="请选择支付方式">
              <Option value="cash">现金交易</Option>
              <Option value="alipay">支付宝</Option>
              <Option value="wechat">微信支付</Option>
              <Option value="bank_transfer">银行转账</Option>
            </Select>
          </Form.Item>

          {/* 备注信息 */}
          <Form.Item
            label="备注信息"
            name="remark"
          >
            <TextArea 
              rows={3} 
              placeholder="可选：添加交易备注信息"
              maxLength={200}
              showCount
            />
          </Form.Item>

          <div style={{ textAlign: 'right' }}>
            <Space>
              <Button onClick={() => setBuyModalVisible(false)}>
                取消
              </Button>
              <Button 
                type="primary" 
                htmlType="submit"
                loading={buyLoading}
              >
                确认购买
              </Button>
            </Space>
          </div>
        </Form>
      </Modal>
    </div>
  )
}

export default ProductDetailPage 